<template>
    <div>
        <pageTable
                searchable
                request-url="/api/order/eng/page"
                v-model="tableData"
                :columns="columns"
                :map-fun="mapRes"
                ref="table"
        >
        </pageTable>
        <advice v-model="adviceOpen" :order-id="curRow.id" @ok="reload"></advice>
        <detail v-model="detailOpen" :data="curRow"></detail>
    </div>
</template>

<script type="text/jsx">
    import pageTable from "_c/page-table/page-table";
    import advice from "_c/advice-model/advice";
    import detail from "_c/order-detail/order-detail";

    export default {
        name: "user-order-view",
        components: {
            pageTable, advice, detail
        },
        data() {
            return {
                detailOpen: false,
                adviceOpen: false,
                curIndex: null,
                curRow: {},
                columns: [
                    {title: '维修单号', key: 'id'},
                    {title: '设备编号', key: 'deviceId'},
                    {title: '设备名称', key: 'name'},
                    {title: '设备分类', key: 'type'},
                    {title: '故障时间', key: 'breakdownTime', notSearch: true, sortable: true},
                    {title: '生产时间', key: 'productionTime', notSearch: true, sortable: true},
                    {title: '报修时间', key: 'createTime', notSearch: true, sortable: true},
                    {
                        title: '状态',
                        notSearch: true,
                        render: (h, {row, index}) => {
                            if (row.advice) {
                                return <Badge status="success" text="已提交"/>
                            }

                            return <Badge status="warning" text="未解决"/>
                        }
                    },
                    {
                        title: '操作',
                        notSearch: true,
                        render: (h, {row, index}) => {
                            if (!row.advice) {
                                return (<div>
                                    <Button type="primary" size="small" style="margin-right: 5px"
                                            nativeOnClick={this.openDetail.bind(this, row, index)}>查看详情</Button>
                                    <Button type="warning" size="small" style="margin-right: 5px"
                                            nativeOnClick={this.openAdvice.bind(this, row, index)}>提交建议</Button>
                                </div>);
                            } else {
                                return <Button type="primary" size="small" style="margin-right: 5px"
                                               nativeOnClick={this.openDetail.bind(this, row, index)}>查看详情</Button>
                            }
                        }
                        , width: 200
                    },
                ],
                tableData: [],

            }
        },
        methods: {
            reload() {
                this.$refs['table'].getTableData()
            },
            mapRes(res) {
                let data = res.data || {}
                let r = data.page.list
                let ad = data.advices
                r.forEach(it => {
                    ad.forEach(i => {
                        if (i.orderId === it.id) {
                            it.advice = i
                        }
                    })
                })
                return {
                    total: data.page.totalCount,
                    size: data.page.pageSize,
                    page: data.page.currPage,
                    data: r
                }
            },

            openAdvice(row = {}, i) {
                this.adviceOpen = !this.adviceOpen
                this.curRow = row
                this.curIndex = i
            },
            openDetail(row = {}, i) {
                this.detailOpen = !this.detailOpen
                this.curRow = row
                this.curIndex = i
            },


        },

    }
</script>

<style scoped></style>

